import Header from '../../components/main/Header.vue' //引入头部

export default {
  components: {
    Header
  },
  data() {
    // 验证手机号的规则
    var checkphone = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regphone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regphone.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    };
    //验证确认密码的规则
    var checkpass = (rule, value, callback) => {
      if (value === this.regForm.password) {
        return callback();
      }
      callback(new Error('两次输入密码不一致!'));
    };

    return {
      //登陆和注册切换时的样式改变
      loginB: 'nodis',
      regB: 'dis',
      font: 'font',
      nofont: 'nofont',

      // 这是登录表单的数据绑定对象
      loginForm: {
        phone: '',
        password: ''
      },
      // 这是注册表单的数据绑定对象
      regForm: {
        phone: '',
        password: '',
        username: '',
        checkPassword: ''
      },

      // 这是登陆表单的验证规则对象
      loginFormRules: {
        //密码
        phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: checkphone,
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [{
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      // 这是登陆表单的验证规则对象
      regFormRules: {
        // 验证用户名是否合法
        username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ], //手机号
        phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: checkphone,
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [{
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ], //确认密码
        checkPassword: [{
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            validator: checkpass,
            trigger: 'blur'
          }
        ]
      } //表单验证结束

    }
  },
  created() {
    //给登陆注册高亮
    window.sessionStorage.setItem("active", '/login');
    this.activeIndex = '/login';
  },
  methods: {
    //点击登陆二字隐藏注册表单显示登陆表单
    toLogin() {
      this.loginB = 'nodis';
      this.regB = 'dis';
      this.font = 'font';
      this.nofont = 'nofont';
    },
    //点击注册二字显示注册表单隐藏登陆表单
    toReg() {
      this.regB = 'nodis';
      this.loginB = 'dis';
      this.font = 'nofont';
      this.nofont = 'font';
    },
    // 点击登陆重置按钮，重置登录表单
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields()
    },
    // 点击注册重置按钮，重置注册表单
    resetRegForm() {
      // console.log(this);
      this.$refs.regFormRef.resetFields()
    },
    // 点击登陆按钮
    login() { // 先获取验证表单结果 true/false
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return // 表示验证结果为false,阻止向下执行
        // qs将post方式提交的表单数据封装
        var qs = require('qs')
        const postData = qs.stringify({
          phone: this.loginForm.phone,
          password: this.loginForm.password
        })
        // 解构并取别名
        const {
          data: res
        } = await this.$axios.post('UserController/login.action', postData)
        console.log(res)
        if (res.status === -1) {
          return this.$message.error('手机号码不存在！')
        } else if (res.status === 0) {
          return this.$message.error('手机号码或密码错误！')
        } else if (res.status === 1) {
          // 1. 将登录成功之后的 user，保存到客户端的 sessionStorage 中
          //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
          //   1.2 user 只应在当前网站打开期间生效，所以将 user保存在 sessionStorage 中
          window.sessionStorage.setItem('user', JSON.stringify(res.user))
        }
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        //this.$message.success('欢迎您！' + res.user.username)
          window.sessionStorage.setItem("active", '/home');//高亮主页的导航
          window.sessionStorage.setItem('activePath','/myInfo');//个人中心主页高亮
          this.$router.push('/home') //去主页
        // this.activeIndex = '/home';
      })
    },
    //点击注册按钮
    reg() { // 先获取验证表单结果 true/false
      this.$refs.regFormRef.validate(async valid => {
        if (!valid) return // 表示验证结果为false,阻止向下执行
        // qs将post方式提交的表单数据封装
        var qs = require('qs')
        const postData = qs.stringify({
          username: this.regForm.username,
          password: this.regForm.password,
          phone: this.regForm.phone
        })
        // 解构并取别名
        const {
          data: res
        } = await this.$axios.post('UserController/addAndUpdateUser.action', postData)
        console.log(res)
        if (res.status === 0) {
          return this.$message.error('手机号码已存在！')
        }
        // 2. 通过编程式导航跳转到登陆页
        this.$message.success('注册成功，请登陆！');
        //把手机号码给登陆表单
        this.loginForm.phone = this.regForm.phone;
        //清空注册表单
        this.resetRegForm();
        //显示登陆表单
        this.toLogin();

      })
    }
    //methods结束
  }
}
